<template>
  <div class="user">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      inline-message
    >
      <el-form-item label="名称">
        <el-input
          v-model="formInline.title"
          placeholder="请输入用户名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getlist">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      </el-form-item>
    </el-form>
    <div
      style="display: flex; width: 100%; height: 100%; flex-direction: column"
    >
      <el-card class="box-card" style="width: 100%">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="100%"
          toggleRowExpansion="expanded"
          @expand-change="tableCurrent"
        >
          <el-table-column type="expand">
            <template #default="scope">
              <div
                style="
                  width: 100%;
                  height: 70px;
                  display: flex;
                  line-height: 50px;
                  align-items: center;
                "
                v-for="item in scope.row.pid"
                :key="item._id"
              >
                <el-tag
                  size="large"
                  closable
                  @close="close_tag(item)"
                  style="margin-left: 100px"
                  v-if="item.leave == 1"
                  >{{ item.name }}</el-tag
                >
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    margin-top: 10px;
                  "
                >
                  <div v-for="items in item.children" :key="items._id">
                    <el-tag
                      style="margin-left: 200px"
                      size="large"
                      closable
                      @close="close_tag(items)"
                      type="success"
                      >{{ items.name }}</el-tag
                    >
                    <!-- v-if="items.leave == 2" -->
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="_id" label="编号" width="230" />
          <el-table-column prop="username" label="用户名" width="200" />
          <el-table-column prop="super" label="等级" width="200" />
          <el-table-column prop="phone" label="手机号" width="250" />
          <el-table-column prop="dept" label="部门" width="100" />
          <el-table-column prop="duties" label="职务" width="100" />
          <el-table-column label="是否启用" #default="scope" width="150">
            <el-switch
              v-model="scope.row.show"
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              @change="switchchange(scope.row)"
              :disabled="scope.row.super == '超级用户' ? true : false"
            />
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="
                  showtree(scope.row);
                  dialogVisible_show = true;
                "
                :disabled="scope.row.super == '超级用户' ? true : false"
                >权限</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="
                  edit(scope.row);
                  dialogVisible_edit = true;
                "
                :disabled="scope.row.super == '超级用户' ? true : false"
                >修改</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="del(scope.row)"
                :disabled="scope.row.super == '超级用户' ? true : false"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="pagenum"
          v-model:page-size="pagesize"
          :page-sizes="[3, 5, 10, 20]"
          layout="sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>

    <!-- 添加 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加"
      width="50%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form label-width="100px" :model="formadd" style="max-width: 460px">
        <el-form-item label="用户名">
          <el-input v-model="formadd.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formadd.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="等级">
          <el-select
            v-model="formadd.super"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option label="超级用户" value="超级用户" />
            <el-option label="普通用户" value="普通用户" />
            <el-option label="老板" value="老板" />
          </el-select>
        </el-form-item>

        <el-form-item label="部门">
          <el-select
            v-model="formadd.dept"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option label="人力资源" value="人力资源" />
            <el-option label="销售部" value="销售部" />
            <el-option label="保安部" value="保安部" />
          </el-select>
        </el-form-item>
        <el-form-item label="职务">
          <el-select
            v-model="formadd.duties"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option label="员工" value="员工" />
            <el-option label="组长" value="组长" />
            <el-option label="经理" value="经理" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              form_add();
              dialogVisible = false;
            "
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      v-model="dialogVisible_edit"
      title="添加"
      width="60%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form label-width="100px" :model="show" style="max-width: 460px">
        <el-form-item label="用户名">
          <el-input v-model="show.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="show.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="等级">
          <el-select
            v-model="show.super"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option label="超级用户" value="超级用户" />
            <el-option label="普通用户" value="普通用户" />
            <el-option label="老板" value="老板" />
          </el-select>
        </el-form-item>

        <el-form-item label="部门">
          <el-select
            v-model="show.dept"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option label="人力资源" value="人力资源" />
            <el-option label="销售部" value="销售部" />
            <el-option label="保安部" value="保安部" />
          </el-select>
        </el-form-item>
        <el-form-item label="职务">
          <el-select
            v-model="show.duties"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option label="员工" value="员工" />
            <el-option label="组长" value="组长" />
            <el-option label="经理" value="经理" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible_edit = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              form_edit();
              dialogVisible_edit = false;
            "
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog
      v-model="dialogVisible_show"
      title="添加"
      width="60%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-tree
        :data="options"
        show-checkbox
        node-key="_id"
        :props="{ label: 'name', children: 'children' }"
        :ref="tree"
        highlight-current
        default-expand-all
        @node-click="handle"
        :default-checked-keys="tree_pid"
        @check-change="tree_change"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive, onMounted, ref, nextTick } from "vue";
import { ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
const formInline = reactive({
  title: "",
  impression: "",
  position: "",
});

let tableData = ref([]);
let table = ref({});
let pagenum = ref(1);
let pagesize = ref(3);
let total = ref(0);
let dialogVisible = ref(false);
let dialogVisible_edit = ref(false);
let dialogVisible_show = ref(false);
let options = ref([]);
let tree = ref(null);
let tree_pid = ref([]);
let tree_obj = ref({});
let tree_id = ref("");
let formadd = reactive({
  username: "",
  super: "",
  phone: "",
  dept: "",
  duties: "",
});
let show = reactive({});
onMounted(() => {
  getlist();
  getcity();
});

let getcity = async () => {
  let { data } = await axios.get("http://localhost:3050/mbw/menu");
  options.value = data.data;
};
let getlist = async () => {
  let obj = { ...formInline };
  let { data } = await axios.get("http://localhost:3050/mbw/user_ls", {
    params: {
      pagenum: pagenum.value,
      pagesize: pagesize.value,
      title: obj.title,
    },
  });

  total.value = data.total;
  tableData.value = data.cates;
};

let handleSizeChange = (val) => {
  pagesize.value = val;
  getlist();
};
let handleCurrentChange = (val) => {
  pagenum.value = val;
  getlist();
};
let del = (row) => {
  axios.post("http://localhost:3050/mbw/user_del/" + row._id);
  getlist();
};
let handleClose = () => {
  ElMessageBox.confirm("是否取消")
    .then(() => {
      dialogVisible = false;
    })
    .catch(() => {});
};
let switchchange = (row) => {
  axios.post("http://localhost:3050/mbw/user_edit/" + row._id, { ...row });
  getlist();
};
let form_add = () => {
  if (formadd.username) {
    axios.post("http://localhost:3050/mbw/user_add", formadd);
    getlist();
  } else {
    alert("请填写用户名");
  }
};
let edit = (row) => {
  show.username = row.username;
  show.phone = row.phone;
  show.dept = row.dept;
  show.super = row.super;
  show.duties = row.duties;
  show._id = row._id;
};
let form_edit = () => {
  if (show.username) {
    axios.post("http://localhost:3050/mbw/user_edit/" + show._id, show);
    getlist();
  } else {
    alert("请填写标题");
  }
};

let showtree = (row) => {
  tree_id.value = row._id;
  row.pid.forEach((item) => {
    console.log(item);
    tree_pid.value.push(item._id);
    if (item.children) {
      item.children.forEach((items) => {
        tree_pid.value.push(items._id);
      });
    }
  });
  // tree_pid.value = row.pid;
  console.log(tree_pid);
  tree_obj.value = { ...row };
};
let tree_change = (data) => {
  tree_obj.value.pid.push(data._id);

  axios
    .post(
      "http://localhost:3050/mbw/user_tree/" + tree_id.value,
      tree_obj.value
    )
    .then((res) => {
      console.log(res);
    });
};

let close_tag = (e) => {
  let idx = table.value.pid.findIndex((item) => item._id == e._id);
  table.value.pid.splice(idx, 1);
  let data = table.value;
  axios.post("http://localhost:3050/mbw/user_edit/" + table.value._id, data);
};
let tableCurrent = (row) => {
  table.value = { ...row };
  console.log(table.value);
};
</script>

<style scoped>
body,
html,
#app,
.user {
  width: 100%;
  height: 100%;
}

.el-form {
  margin-top: 10px;
  width: 100%;
}
.box-card {
  margin-top: 20px;
}
.el-form {
  margin: auto;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.el-overlay,
.el-overlay-dialog,
.el-dialog,
.el-dialog__body {
  width: 500px;
  height: 300px;
}

</style>
